<!--
 * @Author: admin@attacker.club
 * @Date: 2022-11-07 16:23:55
 * @LastEditTime: 2022-11-07 23:39:13
 * @Description: 
-->
<template>
  <!--修改密码对话框-->
  <!-- v-model="UserPasswordDialog" -->
  <el-dialog 
  :model-value="visible"
  @close="dialogClose"
  width="30%" 
  title="修改密码">
  

    <el-form
      :model="UserPasswordForm"
      label-position="right"
      label-width="100px"
      :rules="rules"
      ref="formRef"
    >
      <el-form-item label="原密码：" prop="old_password">
        <el-input
          v-model="UserPasswordForm.old_password"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="password">
        <el-input
          v-model="UserPasswordForm.password"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="再次确认：" prop="confirm_password">
        <el-input
          v-model="UserPasswordForm.confirm_password"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="UserPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="changePasswordSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script>
import { changePassword } from '@/api/user/userinfo'
export default {
    name: 'UserPassword',
  props: {
    visible: Boolean
  },
  data() {
     const checkNewOldPassword = (rule, value, callback) => {
      if (value == this.UserPasswordForm.old_password) {
        callback(new Error('新密码不能与旧密码一样！'))
      } else {
        return callback()
      }
    }
    const checkNewPassword = (rule, value, callback) => {
      if (value != this.UserPasswordForm.password) {
        callback(new Error('两次输入密码不一致！'))
      } else {
        return callback()
      }
    }
    return {
        UserPasswordForm: {
            old_password: '',
            password: '',
            confirm_password: ''
        },
        rules: {
            old_password: [
            { required: true, message: '请输入原密码', trigger: 'blur' },
            { min: 6, message: '用户名长度应不小于6个字符', trigger: 'blur' }
            ],
            password: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, message: '用户名长度应不小于6个字符', trigger: 'blur' },
            { validator: checkNewOldPassword, trigger: 'blur' }
            ],
            confirm_password: [
            { required: true, message: '请确认新密码', trigger: 'blur' },
            { min: 6, message: '用户名长度应不小于6个字符', trigger: 'blur' },
            { validator: checkNewPassword, trigger: 'blur' }
            ]
        },
        
    }
  },
  methods: {
    // 点击关闭，子组件通知父组件更新属性
    dialogClose() {
      this.$emit('update:visible', false) // 父组件必须使用v-model
    },
    changePasswordSubmit() {
      // 提交前预验证
      this.$refs.formRef.validate((valid) => {
        // 回调函数中valid布尔值
          if (valid) {
            changePassword(this.UserPasswordForm).then(response => {
            console.log("msg:",response.msg)
            this.$message({
              message: '密码修改成功，请重新登录',
              type: 'success'
            })
            setTimeout(() => {
                 window.sessionStorage.clear() // 释放存储会话
                 location.reload() 
            }, 1500)
          })
        } else {
          return false
        }



      });
    },
  },
}
</script>